<script setup lang="ts">
import { computed, inject } from "vue";
import type { TagType } from "vant";
import CellGroup from "@/components/CellGroup/index.vue";
import { APPROVE_TYPE_DETAIL_API_MAP } from "../constants";
import { ProcessTypeEnum, ApprovalStatusEnum, ApprovalStatusMap } from "@/views/approveList/constants";

const item = APPROVE_TYPE_DETAIL_API_MAP[ProcessTypeEnum.INQUIRY];
const detail = inject("detail") as any;

/** 附件 */
const attachmentArray = computed(() => {
	return !!detail.value.attachment ? detail.value.attachment.split(",") : [];
});
</script>

<template>
	<van-cell-group>
		<van-cell title="审批名称" :value="item.title" />
		<van-cell title="申请部门" :value="detail.departName" />
		<van-cell title="定价编号" :value="detail.itemCode" />
	</van-cell-group>
	<!-- 遍历明细 -->
	<template v-for="(dtl, index) in detail.detailList" :key="index">
		<CellGroup :mapList="item.detailMap" :detail="dtl" :title="`明细(${index + 1})`">
			<template #status>
				<van-tag class="tag" size="medium" :type="ApprovalStatusMap[detail.status as ApprovalStatusEnum].tagType as TagType">
					{{ ApprovalStatusMap[detail.status as ApprovalStatusEnum].text }}</van-tag
				>
			</template>
		</CellGroup>
	</template>

	<van-cell-group style="margin-top: 5px">
		<van-cell title="附件结果" :value="detail.departName">
			<template #value>
				<ul class="attachment-list" v-if="attachmentArray.length">
					<li class="van-ellipsis" v-for="(url, idx) in attachmentArray" :key="idx">
						<span>{{ url.split("/")[url.split("/").length - 1] }}</span>
					</li>
				</ul>
				<span v-else>-</span>
			</template>
		</van-cell>
		<van-cell title="定价说明" :value="detail.extraDesc"> </van-cell>
	</van-cell-group>
</template>

<style scoped lang="less">
:deep(.van-cell) {
	.van-cell__title {
		width: 115px;
		flex: auto;
		flex-grow: 0;
		flex-shrink: 0;
	}

	.van-cell__value {
		white-space: pre-wrap;
		text-align: left;
	}
}
</style>
